<template>
    <Card>
        <p slot="title">技师提现列表</p>
        <div class="search-con search-con-top">
            订单号：
            <Input v-model="searchData.order_sn" style="width: 130px"></Input>
            技师信息：
            <Input v-model="searchData.user_name" style="width: 130px" placeholder="昵称、手机号"></Input>
            提现状态：
            <Select style="width:100px" v-model="searchData.status">
                <Option value="">请选择</Option>
                <Option value="0">待转账</Option>
                <Option value="1">已打款</Option>
                <Option value="2">已拒绝</Option>
            </Select>
            提现方式：
            <Select style="width:100px" v-model="searchData.type">
                <Option value="">请选择</Option>
                <Option value="1">微信</Option>
                <Option value="2">支付宝</Option>
                <Option value="3">银行卡</Option>
            </Select>
            提现类型：
            <Select style="width:100px" v-model="searchData.fee_type">
                <Option value="">请选择</Option>
                <Option value="0">服务费</Option>
                <Option value="1">车费</Option>
            </Select>
            提现时间：
            <DatePicker type="datetime" v-model="searchData.start_time" placeholder="开始时间" style="width: 160px"></DatePicker>
            <span style="margin: 0 3px;">-</span>
            <DatePicker type="datetime" v-model="searchData.end_time" placeholder="结束时间" style="width: 160px"></DatePicker>
            <Button @click="search" type="primary"  icon="ios-search" style="margin-left: 10px;">搜索</Button>
            <Button @click="reset" type="success"  icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
        </div>
        <br>
        <Table :columns="columns" :data="list" border>
            <template slot-scope="{ row , index}" slot="typeSlot">
                <div @click="showPaymentInfoDao(row)">
                    <span v-if="row.type == 1" style="color: blue;font-size: 15px;text-decoration:underline;cursor:pointer;">支付宝</span>
                    <span v-if="row.type == 2" style="color: blue;font-size: 15px;text-decoration:underline;cursor:pointer;">微信</span>
                    <span v-if="row.type == 3" style="color: blue;font-size: 15px;text-decoration:underline;cursor:pointer;">银行卡</span>
                </div>
            </template>
            <template slot-scope="{ row , index}" slot="feeTypeSlot">
                    <span v-if="row.fee_type == 0">服务费</span>
                    <span v-if="row.fee_type == 1">车费</span>
            </template>
            <template slot-scope="{ row , index}" slot="paymentSlot">
                <p v-if="row.type == 1">
                    <img :src="baseImgeUrl + row.alipay_qr_url" style="width: 80px;height: 80px;">
                </p>
                <p v-if="row.type == 2">
                    <img :src="baseImgeUrl + row.wechat_qr_url" style="width: 80px;height: 80px;">
                </p>
                <span v-if="row.type == 3">
                    开户银行：{{ row.bank_name }}<br>
                    开户支行：{{ row.sub_bank_name }}<br>
                    银行卡号：{{ row.card_number }}<br>
                    开户姓名：{{ row.card_owner }}<br>
                </span>
            </template>
            <template slot-scope="{ row , index}" slot="statusSlot">
                <span v-if="row.status == 0">待转账</span>
                <span v-if="row.status == 1" style="color: blue;">已打款</span>
                <span v-if="row.status == 2" style="color: red;">已拒绝</span><br/>
                <span v-if="row.status == 2" style="color: red;">{{row.reason}}</span>
            </template>
            <template slot-scope="{ row , index}" slot="makeSlot">
                <Button type="primary" size="small" @click="pass(row.id)" v-show="row.status == 0">通过</Button>
                <Button type="error" style="margin-left: 10px;" size="small" @click="showModal(row.id)"
                    v-show="row.status == 0">拒绝</Button>
            </template>
        </Table>
        <br>
        <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize">
        </Page>
        <Modal v-model="showAdd" title="提现审核" @on-ok="audit">
            请输入拒绝理由：
            <Input v-model="reason" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" placeholder="请输入..."></Input>

        </Modal>

        <Modal v-model="showPaymentInfo" title="收款信息">
            <p v-if="paymentInfo.type == 2">
                <img :src="baseImgeUrl + paymentInfo.wechat_img" style="width: 500px;">
            </p>
            <p v-if="paymentInfo.type == 1">
                <img :src="baseImgeUrl + paymentInfo.alipay_img" style="width: 500px;">
            </p>
            <span v-if="paymentInfo.type == 3">
                开户银行：{{ paymentInfo.bank_name }}<br>
                开户支行：{{ paymentInfo.branch_name }}<br>
                银行卡号：{{ paymentInfo.card_no }}<br>
                开户姓名：{{ paymentInfo.card_user }}<br>
            </span>
        </Modal>
    </Card>
</template>

<script>
import config from "@/config";
import { getToken } from "../../libs/util";
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
    name: "tech_withdraw_list",
    data() {
        return {
            baseImgeUrl: baseImgeUrl,
            // 列表
            columns: [
                {
                    title: '订单号',
                    key: 'order_sn',
                    align: "center",
                    width: 180,
                },
                {
                    title: '用户名称',
                    align: "center",
                    key: 'tech_name',
                },
                {
                    title: '用户手机号',
                    align: "center",
                    key: 'tech_mobile',
                    width: 120,
                },
                {
                    title: '提现前余额',
                    align: "center",
                    key: 'before',
                },
                {
                    title: '提现金额',
                    align: "center",
                    key: 'money',
                },
                {
                    title: '提现后余额',
                    align: "center",
                    key: 'after',
                },
                {
                    title: '手续费',
                    align: "center",
                    key: 'fee',
                },
                {
                    title: '到账金额',
                    align: "center",
                    key: 'fack_receive',
                },
                {
                    title: '提现方式',
                    align: "center",
                    slot: 'typeSlot',
                },
                {
                    title: '提现类型',
                    align: "center",
                    slot: 'feeTypeSlot',
                },
                {
                    title: '状态',
                    align: "center",
                    slot: 'statusSlot',
                },
                {
                    title: '提现时间',
                    align: "center",
                    key: 'create_time',
                },
                {
                    title: '审核时间',
                    align: "center",
                    key: 'confirm_date',
                },
                {
                    title: '操作',
                    align: "center",
                    width:"130",
                    slot: 'makeSlot',
                },
            ],
            // 数据
            list: [],
            total: 0,
            searchData: {
                page: 1,
                limit: 10,
            },
            showAdd: false,
            reason: '',
            id: 0,
            showPaymentInfo: false,
            paymentInfo: {},
        }
    },
    methods: {
        getList() {
            const param = {
                ...this.searchData
            };
            this.$axios('/admin/finance/getTechWithdrawList', param).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        search() {
            this.searchData.page = 1;
            this.getList();
        },
        reset() {
            this.searchData = {
                page: 1,
                limit: 10,
            };
            this.getList();
        },
        changePage(page) {
            this.searchData.page = page;
            this.getList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getList();
        },
        // 显示添加角色弹窗
        showModal(id, type) {
            this.showAdd = true;
            this.id = id
        },
        audit() {
            this.$axios('/admin/finance/techAudit', { id: this.id, status: 2, reason: this.reason }).then(res => {
                this.$Message.success('审核成功');
                this.getList();
            })
        },
        // 添加角色
        pass(id) {
            this.$axios('/admin/finance/techAudit', { id: id, status: 1 }).then(res => {
                this.$Message.success('审核成功');
                this.getList();
            })
        },
        //
        showPaymentInfoDao(row) {
            this.showPaymentInfo = true;
            this.paymentInfo = row;
        },
    },
    created() {
        // 查询自己管理员
        this.getList();
    }
}
</script>

<style>
.inputMaxWidth {
    max-width: 180px;
    margin-left: 10px;
}
</style>
